<!doctype html>
<html lang="en">













    









<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="theme-color" content= #93b658 >
    <title>从零开始搭建一个博客 | BadRequest的博客 </title>

    
        <meta name="keywords" content="pteris, hexo"/>
        

    
    <meta name="description" content="前言由于最近完成了毕业论文，比较清闲，于是想起了我之前还有个博客，之前用的是另一个主题，内容很丰富，也十分臃肿，在访问时也特别缓慢，所以决定重新开始搭建，搭建完成之后刚好可以记录下来，以便日后参..."/>

    
        <link rel="shortcut icon" type="image/x-icon" href="/favicon.png?v="/>
    

    

    

    
        
<link rel="stylesheet" href="/lib/social-share.js/dist/css/share.min.css">

    
    
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">

    
<link rel="stylesheet" href="/lib/materialize/dist/css/materialize.min.css">

    
<link rel="stylesheet" href="/lib/animate.css/animate.min.css">

    
<link rel="stylesheet" href="/css/post/atom-one-light.css">

    
<link rel="stylesheet" href="/css/pteris.css">



    
        
<link rel="stylesheet" href="/css/post.css">

    

    
        
<link rel="stylesheet" href="/lib/lightgallery.js/dist/css/lightgallery.min.css">

    

    
<meta name="generator" content="Hexo 5.4.2"></head>

<body>

<header>
    
        <div class="header-fixed">
    <nav class="white lime-text lighten-1 " role="navigation">
        <div class="nav-wrapper container">
            <div id="logo-container">
                <a href="/">
                    
                    <span class="brand-logo">BadRequest的博客</span>
                </a>
            </div>

            <ul class="right hide-on-med-and-down">
                
                    <li><a href="/archives">Archives</a></li>
                
                    <li><a href="/tags">Tags</a></li>
                
            </ul>
            <a href="#" data-activates="nav-mobile" class="button-collapse">
                <i class="fa fa-bars green-text"></i></a>
        </div>
    </nav>
</div>

<ul id="nav-mobile" class="side-nav">
    
        <li><a href="/archives">Archives</a></li>
    
        <li><a href="/tags">Tags</a></li>
    
</ul>



    
</header>

<main>
    

    <div id="post">
        <div class="container">
            <div id="post-header" class="center">
                <h1 class="center">从零开始搭建一个博客</h1>
                <span class="post-date center">
                    <i class="fa fa-calendar"></i>
                    <time datetime="2022-05-12T09:49:43.928Z">
                        2022-05-12
                    </time>
                </span>

                

                
                    <div class="post-gallery">
                        <div id="lightgallery">
                            
                        </div>
                    </div>
                
            </div>

            <article>
                <div class="content">
                    
    <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>由于最近完成了毕业论文，比较清闲，于是想起了我之前还有个博客，之前用的是另一个主题，内容很丰富，也十分臃肿，在访问时也特别缓慢，所以决定重新开始搭建，搭建完成之后刚好可以记录下来，以便日后参考。</p>
<h2 id="1-安装Hexo"><a href="#1-安装Hexo" class="headerlink" title="1.安装Hexo"></a>1.安装Hexo</h2><p><a href="%5BHexo%5D(https://hexo.io/zh-cn/)">Hexo</a>是一个开源的博客框架，可以不需要编写代码就能生成一个博客，而且还有各种主题，本人十分推荐。<br>首先，你需要先安装<a target="_blank" rel="noopener" href="http://nodejs.cn/download/">node.js</a>以及<a target="_blank" rel="noopener" href="https://git-scm.com/downloads">git</a>，安装最新版即可，若下载缓慢，在文末有本文所需的所有软件的网盘链接。安装完成之后打开命令行工具执行以下命令：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure>

<p>新建一个文件夹，名字随意，最好为英文名称，这里我在D盘下新建了一个blog文件夹，打开命令行，执行：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npx hexo init D:/blog/</span><br><span class="line"><span class="built_in">cd</span> D:/blog/</span><br><span class="line">npm install</span><br></pre></td></tr></table></figure>

<p>然后你就可以在blog文件夹下看到你的博客项目了，后续进行一些配置即可。</p>
<h2 id="2-安装主题"><a href="#2-安装主题" class="headerlink" title="2.安装主题"></a>2.安装主题</h2><p>Hexo提供了很多主题，我们可以根据自己的喜好自由选择，打开Hexo的[主题](<a target="_blank" rel="noopener" href="https://hexo.io/themes/">Themes | Hexo</a>)页面，可以看到很多主题：</p>
<p><a target="_blank" rel="noopener" href="https://imgtu.com/i/OBwNiq"><img src="https://s1.ax1x.com/2022/05/12/OBwNiq.png" alt="OBwNiq.png"></a></p>
<p>这里我选择的是<a target="_blank" rel="noopener" href="https://github.com/jonashao/hexo-theme-pteris">pteris</a>主题，每个主题的配置不同，他们都会提供参考文档，以pteris为例，安装这个主题。</p>
<p>首先在打开命令行工具，切换到刚刚的blog目录，执行以下命令：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install --save hexo-renderer-njks</span><br><span class="line">git <span class="built_in">clone</span> https://github.com/jonashao/hexo-theme-pteris themes/pteris</span><br></pre></td></tr></table></figure>

<p>执行完成之后，在blog的themes文件夹下就能看到pteris目录，打开这个目录，创建一个文件，命名为 <strong>_config.yml</strong>，打开，粘贴一下内容并保存：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># main menu navigation</span></span><br><span class="line"><span class="attr">menu:</span></span><br><span class="line">  <span class="attr">Archives:</span> <span class="string">/archives</span></span><br><span class="line">  <span class="attr">Tags:</span> <span class="string">/tags</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Miscelaneous</span></span><br><span class="line"><span class="attr">favicon:</span> <span class="string">/favicon.png</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># stylesheets loaded in the &lt;head&gt;</span></span><br><span class="line"><span class="attr">stylesheets:</span></span><br><span class="line"><span class="comment"># - /css/your.css.file.css</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># scripts loaded in the end of the body</span></span><br><span class="line"><span class="attr">scripts:</span></span><br><span class="line"><span class="comment"># - /js/your.js.file.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># helping search engine to better understand your site.</span></span><br><span class="line"><span class="attr">keywords:</span> <span class="string">pteris,</span> <span class="string">hexo</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># the large image in the front of index page.</span></span><br><span class="line"><span class="attr">headerImageUrl:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># your avatar representing in the header of index page</span></span><br><span class="line"><span class="attr">avatar:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># title represented in the header of index page.</span></span><br><span class="line"><span class="attr">title:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># description represented in the header of the index page.</span></span><br><span class="line"><span class="attr">description:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># add filing number in the footer</span></span><br><span class="line"><span class="attr">filing:</span></span><br></pre></td></tr></table></figure>

<p>打开<strong>blog</strong>文件夹下的**_config.yml**（注意是blog文件夹下的，而不是刚刚创建的），往下滚动找到thtmt属性，后面加上pteris并保存，如：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">theme:</span> <span class="string">pteris</span></span><br></pre></td></tr></table></figure>

<h2 id="3-本地运行"><a href="#3-本地运行" class="headerlink" title="3.本地运行"></a>3.本地运行</h2><p>完成以上操作之后，打开命令行，切换到blog文件夹路径，执行以下命令即可在本地浏览器预览：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo server</span><br></pre></td></tr></table></figure>

<p>正常运行结果如下：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">PS D:\blog&gt; hexo server</span><br><span class="line">INFO  Validating config</span><br><span class="line">INFO  Start processing</span><br><span class="line">INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.</span><br></pre></td></tr></table></figure>

<p>按照给出的网址，在浏览器中打开即可看到自己的博客，如图：</p>
<p><a target="_blank" rel="noopener" href="https://imgtu.com/i/OB6itJ"><img src="https://s1.ax1x.com/2022/05/12/OB6itJ.md.png" alt="OB6itJ.md.png"></a></p>
<p>图中的头像是在主题的配置文件**_config.yml**中配置的，可以自行填写头像地址，也可以配置其他内容，这个就得自己去看官方的主题文档了。</p>
<h2 id="4-托管到Gitee"><a href="#4-托管到Gitee" class="headerlink" title="4.托管到Gitee"></a>4.托管到Gitee</h2><p>在文件夹中右键<code>git Bash Here</code>中输入下面的两个命令进行配置</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git config --globale user.name <span class="string">&quot;gitee空间地址&quot;</span></span><br><span class="line">git config --globale user.email <span class="string">&quot;你的邮箱&quot;</span></span><br></pre></td></tr></table></figure>

                </div>
            </article>


            <div class="post-tags center">
                
            </div>


            <div class="social-share" data-mobile-sites="weibo,qq,qzone,facebook,twitter">
                <span id="share-to">Share to</span>
            </div>

            <div class="post-footer">
                
                
            </div>
        </div>
    </div>


</main>

<footer>
    
        <footer class="page-footer">
    <div class="footer-copyright">
        <div class="container">
            <div>© 2017 Copyright hhui
                <span class="right">
                powered by
                <a target="_blank" rel="noopener" href="http://hexo.io">hexo</a>.
                theme:
                <a target="_blank" rel="noopener" href="https://github.com/jonashao/hexo-theme-pteris">pteris</a>
                </span>
            </div>
        </div>
    </div>

    
</footer>

    
</footer>


    
<script src="/lib/jquery/dist/jquery.min.js"></script>


<script src="/lib/materialize/dist/js/materialize.min.js"></script>


<script src="/lib/headroom.js/dist/headroom.min.js"></script>


<script src="/lib/headroom.js/dist/jQuery.headroom.min.js"></script>




    
<script src="/lib/social-share.js/dist/js/share.min.js"></script>





<script src="/js/pteris.js"></script>



    
<script src="/lib/lightgallery.js/dist/js/lightgallery.min.js"></script>









</body>
</html>
